<template>
    <div>
        <cu-navbar>
            <block slot="content">杜康酒</block>
        </cu-navbar>
        <view class="qiye-dongtai-page page">
            <div class="f-r a-c input-box">
                <u-search shape="square" :showAction="false" bgColor="#f8f8f8" v-model="searchValue" placeholder="请输入搜索内容" inputAlign="left" height="70rpx"></u-search>
            </div>
            <div class="product-list f-r j-b a-c">
                <u-row gutter="10" style="width: 100%;">
                    <u-col span="6" v-for="item in list" :key="item.id">
                        <div class="product-item" @click="toDetail(item)">
                            <u-image mode="aspectFill" width="100%" height="250rpx" :src="item.src"></u-image>
                            <div class="product-item-content">
                                <div class="name">{{ item.text }}</div>
                                <div class="desc">{{ item.desc}}</div>
                            </div>
                        </div>
                    </u-col>
                </u-row>
            </div>
        </view>
    </div>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				list: []
			}
		},
		onLoad() {
			// 杜康动态
			this.$api.home(1).then(res => {
				this.list = res.result.painters.map(el => {
					return {
						src: el.pic,
						text: el.title,
						...el,
					}
				})
			})
		},
		methods: {
			toDetail(row) {
				uni.navigateTo({
					url: '/pages/art-list/content?id=' + row.id
				})
			}
		}
	}
</script>

<style lang="scss">
.qiye-dongtai-page {
	.input-box {
		background-color: #fff;
		padding: 20px;
	}
	.product-list {
		margin-top: 20rpx;
		padding: 0 30rpx;
		.product-item {
			border-radius: 4px;
			overflow: hidden;
			background-color: #fff;
			width: 100%;
        margin-bottom: 10rpx;
			.name {
				padding: 20rpx 20rpx 14rpx 20rpx;
			}
			.desc {
				color: #ccc;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: keep-all;
				white-space: nowrap;
				padding:0 20rpx 20rpx 20rpx;
			}
		}
	}
}
</style>
